不知不覺我們的 30 天鐵人賽已經推進到第 10 天了！
在過去的這一週裡，我們從 VS Code 環境設定、HTML 的容器與語意化、CSS 選擇器、盒模型（Box Model），一路闖關到排版神器 Flexbox 與 Grid。

光看觀念可能有點枯燥，俗話說「工欲善其事，必先動手做」，今天我們不學新語法，要來把這一週學到的所有招式融會貫通，親手用純 HTML 和 CSS 刻出第一張屬於自己的個人名片卡片！

實戰演練：我們要做出什麼樣子的卡片？

想像一下你在 LinkedIn 或個人作品集看到的個人名片區塊，它通常會包含：

1. 大容器（Card）： 帶有圓角、陰影、置中對齊的白色卡片背景
2. 頭像區（Avatar）： 圓形的個人大頭照或插圖
3. 文字區（Bio）： 你的名字、職稱（例如：設計轉前端的學習者）、以及一段自我介紹
4. 社群按鈕區（Buttons）： 像是「GitHub」、「Figma」或「聯絡我」的互動按鈕

程式碼實作範例

HTML 部分（骨架與圖層）：

<div class="profile-card">
    <!-- 頭像 -->
    <img src="avatar.jpg" alt="個人頭像" class="avatar">
    
    <!-- 文字資訊 -->
    <div class="info">
        <h2>孫小豬</h2>
        <p class="title">設計系學生的前端打怪日常</p>
        <p class="desc">從 Figma 走向 VS Code，找回消失的程式手感！</p>
    </div>
    
    <!-- 按鈕區 -->
    <div class="btn-group">
        <a href="#" class="btn primary">GitHub</a>
        <a href="#" class="btn secondary">聯絡我</a>
    </div>
</div>

CSS 部分（排版與上妝）：

/* 卡片本身：置中、加上圓角與陰影，展現設計質感 */
.profile-card {
    width: 350px;
    background: #ffffff;
    padding: 32px;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    text-align: center;
    margin: 50px auto;
}

/* 頭像：變成漂亮的正圓形 */
.avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 16px;
}

/* 按鈕區：用 Flexbox 讓按鈕並排且平均分散 */
.btn-group {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.btn {
    flex: 1; /* 均分寬度 */
    padding: 10px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
}

.btn.primary {
    background: #333;
    color: #fff;
}

.btn.secondary {
    background: #f0f0f0;
    color: #333;
}

今日小結

透過這張名片卡片的實作，我們把前面學到的「Box Model（padding、margin、box-shadow）」、「Flexbox（按鈕並排與間距）」全部用上了！看著原本冷冰冰的程式碼變成精美的介面，是不是很有成就感呢？

第一週的基礎打底順利完結！明天開始，我們將正式跨入第二週，迎接讓網頁能夠「隨螢幕變大變小的 RWD 響應式設計」，以及開始接觸 JavaScript 的邏輯世界！